const data = [
  {
    groupName: '房地产销售',
    items: [
      {
        imgSrc: './images/examples/01.jpg',
        name: '深圳龙华.港铁天颂',
        vrUrl: 'https://beyond.3dnest.cn/house/?m=7fd25350_Fq6V_b6f9'
      },
      {
        imgSrc: './images/examples/02.jpg',
        name: '深圳南头古城.泊寓公寓图书馆',
        vrUrl: 'http://beyond.3dnest.cn/play/?m=aa0dffba_lkz7_b6f9'
      }
    ]
  },
  {
    groupName: '酒店/民宿',
    items: []
  },
  {
    groupName: '家装装修',
    items: []
  },
  {
    groupName: '博物馆/办事&培训机构',
    items: []
  },
  {
    groupName: '商城/商铺',
    items: [
      {
        imgSrc: './images/examples/03.jpg',
        name: '深圳爱室丽|NACACS品牌家居城',
        vrUrl: 'https://beyond.3dnest.cn/2K/?m=ffde67d2_AY0i_b6f9'
      }
    ]
  },
  {
    groupName: '旅游景区',
    items: [
      {
        imgSrc: './images/examples/04.jpg',
        name: '广东惠东巽寮湾天后宫文化街',
        vrUrl: 'https://web.xiaohongwu.com/webapp/hotspot/index.html#/preview?userId=15318&relationId=910&id=49939&isFrom=3'
      }
    ]
  },
  {
    groupName: '企业/工厂',
    items: []
  }
]

const elWraper = document.querySelector('#examplesWraper')

const htmlFragment = data.map(group => {
  const itemsFragment = group.items.map(item => {
    return `
    <div class="example">
      <a href="${item.vrUrl}">
        <img class="example-img" src="${item.imgSrc}" />
      </a>
      <p class="example-name">${item.name}</p>
    </div>
    `
  }).join('')

  return `
  <div class="example-group">
    <div class="example-group-title">${group.groupName}</div>
    ${itemsFragment}
  </div>
  `
}).join('')

elWraper.innerHTML = htmlFragment
